@import '../common/style/base.less';

// dot & dots-bar
@swiper-nav-dot-color: var(--td-swiper-nav-dot-color, @font-white-2);
@swiper-nav-dot-active-color: var(--td-swiper-nav-dot-active-color, @text-color-anti);
@swiper-nav-dot-size: var(--td-swiper-nav-dot-size, 12rpx);
@swiper-nav-dots-bar-active-width: var(--td-swiper-nav-dots-bar-active-width, 40rpx);

// fraction
@swiper-nav-fraction-color: var(--td-swiper-nav-fraction-color, @text-color-anti);
@swiper-nav-fraction-bg-color: var(--td-swiper-nav-fraction-bg-color, @font-gray-3);
@swiper-nav-fraction-height: var(--td-swiper-nav-fraction-height, 48rpx);
@swiper-nav-fraction-font-size: var(--td-swiper-nav-fraction-font-size, 24rpx);

// button
@swiper-nav-btn-color: var(--td-swiper-nav-btn-color, @text-color-anti);
@swiper-nav-btn-bg-color: var(--td-swiper-nav-btn-bg-color, @font-gray-3);
@swiper-nav-btn-size: var(--td-swiper-nav-btn-size, 48rpx);

.@{prefix}-swiper-nav {
  &__dots,
  &__dots-bar {
    display: flex;
    flex-direction: row;

    &-item {
      width: @swiper-nav-dot-size;
      height: @swiper-nav-dot-size;
      background: @swiper-nav-dot-color;
      border-radius: 50%;
      margin: 0 10rpx;
      transition: all 0.4s ease-in;

      &--vertical {
        margin: 10rpx 0;
      }

      &--active {
        background-color: @swiper-nav-dot-active-color;
      }
    }
  }

  &__dots-bar {
    &-item {
      &--vertical&--active {
        width: @swiper-nav-dot-size;
        height: @swiper-nav-dots-bar-active-width;
      }
      &--active {
        width: @swiper-nav-dots-bar-active-width;
        border-radius: calc(@swiper-nav-dot-size / 2);
        background-color: @swiper-nav-dot-active-color;
      }
    }
  }

  &--left {
    position: absolute;
    left: 24rpx;
    top: 50%;
    transform: translateY(-50%);
  }

  &--right {
    position: absolute;
    right: 24rpx;
    top: 50%;
    transform: translateY(-50%);
  }

  &--top-left {
    position: absolute;
    top: 24rpx;
    left: 24rpx;
  }

  &--top {
    position: absolute;
    left: 50%;
    top: 24rpx;
    transform: translateX(-50%);
  }

  &--top-right {
    position: absolute;
    top: 24rpx;
    right: 24rpx;
  }

  &--bottom-left {
    position: absolute;
    left: 24rpx;
    bottom: 24rpx;
  }

  &--bottom {
    position: absolute;
    left: 50%;
    bottom: 24rpx;
    transform: translateX(-50%);
  }

  &--bottom-right {
    position: absolute;
    right: 24rpx;
    bottom: 24rpx;
  }

  &--vertical {
    flex-direction: column;
  }

  &__fraction {
    padding: 0 16rpx;
    height: @swiper-nav-fraction-height;
    line-height: @swiper-nav-fraction-height;
    border-radius: calc(@swiper-nav-fraction-height / 2);
    background: @swiper-nav-fraction-bg-color;
    color: @swiper-nav-fraction-color;
    font-size: @swiper-nav-fraction-font-size;
  }

  &__btn {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    &--prev,
    &--next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: @swiper-nav-btn-size;
      height: @swiper-nav-btn-size;
      border-radius: 50%;
      background: @swiper-nav-btn-bg-color;

      &::after {
        position: absolute;
        left: 50%;
        top: 50%;
        display: block;
        content: '';
        width: 12rpx;
        height: 12rpx;
        border-color: @swiper-nav-btn-color;
        border-style: solid;
      }
    }

    &--prev {
      left: 30rpx;

      &::after {
        margin-left: 4rpx;
        border-width: 2rpx 0 0 2rpx;
        transform: translate(-50%, -50%) rotateZ(-45deg);
      }
    }

    &--next {
      right: 30rpx;

      &::after {
        margin-left: -4rpx;
        border-width: 2rpx 2rpx 0 0;
        transform: translate(-50%, -50%) rotateZ(45deg);
      }
    }
  }
}
